/*
 * 重置密码的views视图
 * @Author: ljb
 * @Date: 2018-04-19 13:52:26
 * @Last Modified by: kanglin
 * @Last Modified time: 2018-06-27 18:37:20
 */
<style lang="less" rel="stylesheet/less" type="text/less" scoped>

    .v-reset-password-views {
        width: 100%;
        height: 100%;
        padding-top: 9%;
        background-image: url('//beauty-mirror.gz.bcebos.com/web_admin/login_bg1.jpg');
        background-repeat: no-repeat;
        background-size: cover;
        background-position: 0 0;
        background-color: #f0f2f5;
        .reset-content {
            // height: 600px;
            // margin: 0 auto;
            // box-shadow: 0px 0px 10px 1px #cecece;
			// border-radius: 10px;
			// overflow: hidden;
			// position: relative;
			width: 1100px;
    		height: 600px;
			margin: 0 auto;
			border-radius: 10px;
			overflow: hidden;
			display: flex;
			justify-content: center;
		}
		.footer-logo {
			position: absolute;
			bottom: 10px;
			width: 100%;
			height: 30px;
			font-size: 0;
			text-align: center;
			img {
				height: 100%;
			}
		}
    }

</style>
<template>
	<div class="v-reset-password-views">
		<div class="reset-content">

			<reset-create
				:view-show="success_show"
				:permission-type="form_data.type"
				@post="confirmResetPwd"/>

			<Spin
				v-if="login_loading"
				fix
				class="login-load">
				<Icon
					type="load-c"
					size="18"
					class="demo-spin-icon-load" />
				<div>
					{{ $t('login.please_wait') }}
				</div>
			</Spin>

		</div>
		<!-- 底部logo -->
		<div class="footer-logo">
			<img
				src="//beauty-mirror.gz.bcebos.com/web_admin%2Fpanx_home_name.png"
				alt="">
		</div>
	</div>
</template>

<script>

import API_LIST from 'src/API_LIST';
import { mapMutations } from 'vuex';
import { formaturl } from 'src/utils/utils';
import resetCreate from './create';

export default {
	name: 'ResetPasswordsViews',
	components: {
		resetCreate,
	},
	data() {
		return {

			form_data: {

				password: '',

				password_confirmation: '',

				type: '',

				token: '',

				expired: '',

				language: 'zh-CN',

			},

			login_loading: false,

			success_show: true, // 控制页面显示
		};
	},
	mounted() {
		const url_param = formaturl();

		if (!url_param || Object.keys(url_param).length === 0) {
			this.$Message.error(this.$t('reset_password.no_info'));

			this.$router.push({
				path: '/login',
			});

			return;
		}

		this.form_data.type = url_param.type;
		this.form_data.token = url_param.token;
		this.form_data.expired = url_param.expired;
		this.form_data.language = url_param.lang || this.form_data.language;
	},
	methods: {

		...mapMutations('spinShow', [
			'showSpin',
			'closeSpin',
		]),

		/**
         * 确认重置密码
         * @return {undefined}
         */
		confirmResetPwd({ password, password_confirmation }) {
			this.login_loading = true;
			const param = {

				password,

				password_confirmation,

				type: this.form_data.type,

				token: this.form_data.token,

				expired: this.form_data.expired,

				language: this.form_data.language,

			};

			this.$http.post(API_LIST.RESET_PASSWORD, param)
				.then(({ data }) => {
					if (parseInt(data.code, 10) !== 0) throw new Error(data.error);

					this.$Message.success(this.$t('reset_password.reset_success'));

					this.success_show = false; // 控制页面显示

					// this.jumpToLoginPage();
				})
				.catch((err) => {
					this.$Message.error(err.message || err.statusText);
				})
				.then(() => {
					this.login_loading = false;
				});
		},

		/**
         * 重置密码后跳转到login页面
         * @return {undefined}
         */
		jumpToLoginPage() {
			this.$router.push({
				path: '/login',
			});
		},

	},
};
</script>
